<template>
  <div style="background-color: #FFFFFF; padding: 20px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="间隔长度" prop="every">
        <el-input v-model="ruleForm.every"></el-input>
      </el-form-item>


      <el-form-item label="间隔单位" prop="period">
        <el-select v-model="ruleForm.period" placeholder="请选择间隔单位" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsPeriod"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'EditInterval',
    data() {
      return {

        optionsPeriod: [],  // 存储CommonChoices实际数据的列表


        EditUrl: this.$http.IntervalURL,  // get编辑的URL
        EditIdStr: 'interval_id',  // 模块id字符串
        pushObjName: 'Interval',  // 成功后跳转的路由

        ruleForm: {
          every: '',//间隔长度
          period: '',//间隔单位
        },  //
        rules: {
          every: [
            {required: true, message: '请输入间隔长度', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          period: [
            {required: true, message: '请输入间隔单位', trigger: 'blur'},
            {min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
          ],
        }
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsPeriod = this.getChoices.task.period;
    },
    methods: {
      submitForm() {
        this.$myTool.submitForm(this)
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this)
      },

      //
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },
  }
</script>
